<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入依赖 -->
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script>
    <link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css">
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        // 加载武汉的geojson数据，点击哪里，哪里就变红。别的不变红。
        /* 瓦片图层 */
        var url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        var layer = L.tileLayer(url, {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        })
        /* 实例化地图 */
        const map = L.map("map", {
            layers: [layer],
            // layers: null,
            /* center:[纬度,经度] */
            center: [30.50, 114.30],
            zoom: 8
        })
        console.log(map)// 图层是e25// 25是一开始在属性中就加了的那个图层。
        let gis_url = "https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json"
        $.ajax({
            url: gis_url
        }).then(data => {
            console.log(data);
            // 1.加载武汉geojson数据，并添加到图层中。
            var wuhan_layer = L.geoJSON(data);
            map.addLayer(wuhan_layer);
            console.log(map);// 25 38-52【1+15个】【有39,52】// 52是那个图层管理器 
            // 39也是那个图层管理器
            // console.log(map._layers["39"]);
            // console.log(map._layers["52"]);
            // console.log(map._layers["39"] === wuhan_layer);// true
            // console.log(map._layers["52"] === wuhan_layer);// false

            console.log(map._layers["26"] === wuhan_layer);// true
            console.log(map._layers["39"] === wuhan_layer);// false

            wuhan_layer.on('click', evt => {
                console.log(evt.target);// 38-51【13个】【没有39】// 武汉13个区
            })
        })

        /*
        虽然你没有显式地添加 map._layers["52"]，但是它是在调用了 
        L.control.layers() 后自动创建并添加到地图上的，以提供图层的切换控制功能。
总结起来，map._layers["52"] 是一个控制图层，
用来方便你切换不同的图层展示。在你的代码中，
它被创建并默认添加到了地图上。如果你不希望显示这个控制图层，
可以在创建地图时省略 layers 参数或将其设为 null。
        */
    </script>
</body>

</html>